<!--Created by daminghu-cli yasenagat# on 2019-03-12 11:29:55-->



<template>
    <div class="fillcontain">

        <ve-pie :data="chartData"></ve-pie>

        <section class="data_section">
            <header class="data_header">数据统计</header>
            <el-row :gutter="12">

            
                

            <el-col class="cel" :span="8">
                <el-card :body-style="{ padding: '10px' }" shadow="hover">
                    <div @click="handlerClick('/tb_book')" class="data">
                        <div class="label">图书数量</div>
                        <div class="count">{{ count0 }}</div>
                    </div>
                </el-card>
            </el-col>

                

            <el-col class="cel" :span="8">
                <el-card :body-style="{ padding: '10px' }" shadow="hover">
                    <div @click="handlerClick('/tb_user')" class="data">
                        <div class="label">用户信息数量</div>
                        <div class="count">{{ count1 }}</div>
                    </div>
                </el-card>
            </el-col>

                
            


            </el-row>
        </section>
    </div>
</template>

<script>

    import {

    
        

            api_readcount_tb_book,

        

            api_readcount_tb_user,

        
    

    } from "../api/api";

    export default {
        data() {
            return {
            
                

                    count0:0,

                

                    count1:0,

                
            
                form: {},
                option: {
                    data: []
                },
                chartData: {
                }
            }
        }
        ,
        components: {}
        ,
        created() {
            this.initData();
        }
        ,
        methods: {
            async initData() {

                Promise.all([
                
                    

                        api_readcount_tb_book(),

                    

                        api_readcount_tb_user(),

                    
                
                ]).then(res => {
                
                    

                        this.count0 = res[0].body.count;

                    

                        this.count1 = res[1].body.count;

                    
                
                    this.chartData = {
                        columns: ['label', 'count'],
                        rows: [

                        
                            

                                {'label': '图书数量', 'count': this.count0},

                            

                                {'label': '用户信息数量', 'count': this.count1},

                            
                        


                        ]
                    }
                }).catch(err => {
                    console.log(err)
                })
            }
            ,
            handlerClick(path) {
                this.$router.push({path: path})
            }
        }
        ,
    }
</script>

<style lang="less">
    @import '../style/mixin';

    .data_section {
        padding: 20px;
        margin-bottom: 40px;
        .data_header {
            text-align: center;
            font-size: 30px;
            margin-bottom: 10px;
        }
        .cel {
            padding: 20px;
        }
        .data {
            margin: 10px;
            padding: 10px;
            /*padding: 20px;*/
            text-align: center;
            font-size: 14px;
            color: #666;
            border-radius: 6px;
            background: #E5E9F2;
            .count {
                color: #20A1FF;
                font-size: 26px;

            }
            .label {
                border-radius: 6px;
                font-size: 22px;
                padding: 4px 0;
                color: #FF8800;
                display: inline-block;
            }
        }
    }


</style>
